<template>
  <view>
    <u-navbar title="基础信息" autoBack fixed placeholder></u-navbar>
    <view class="content">
      <view style="border-radius: 8px;overflow: hidden;width: auto;margin: 10px;">
        <!-- <u-cell title="学校" value="南昌工程学院"></u-cell>
        <u-cell title="学院" :value="values.dept" isLink @click="item.dept = true"></u-cell>
        <u-cell title="专业" :value="values.major" isLink @click="item.major = true"></u-cell>
        <u-cell title="班级" :value="values.clazz" isLink @click="item.clazz = true"></u-cell>
        <u-cell title="入学年份" :value="values.grade" isLink @click="item.grade = true"></u-cell> -->
        <u-cell title="学校" value="南昌工程学院"></u-cell>
        <u-cell title="学院" :value="values.dept" isLink></u-cell>
        <u-cell title="专业" :value="values.major" isLink></u-cell>
        <u-cell title="班级" :value="values.clazz" isLink></u-cell>
        <u-cell title="入学年份" :value="values.grade" isLink></u-cell>
      </view>
    </view>

    <u-picker :show="item.dept" :columns="depts" keyName="label" 
    @cancel="item.dept = false" @confirm="changeDept"></u-picker>
    <u-picker :show="item.grade" :columns="grades" :default-index="[grades[0].length - 1]" @cancel="item.grade = false" @confirm="changeGrade"></u-picker>
    <u-picker :show="item.major" :columns="majors" keyName="label"
    @cancel="item.major = false" @confirm="changeMajor"></u-picker>
    <u-picker :show="item.clazz" :columns="clazzs" @cancel="item.clazz = false" @confirm="changeClazz"></u-picker>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { clazzs as clazzList } from '@/utils/constants'
import { 
  getDept
} from '@/api'
export default {
  props: {},
  data() {
    return {
      item: {
        dept: false,
        grade: false,
        major: false,
        clazz: false
      },
      values: {
        deptId: '',
        dept: '',
        grade: '',
        majorId: '',
        major: '',
        clazz: ''
      },
      depts: [[]],
      majors: [[{label: '请先选择院系', id: ''}]],
      clazzs: [clazzList]
    }
  },
  computed: {
    ...mapGetters(['dept', 'major', 'grade', 'clazz']),
    grades() {
      const grade = []
      const date = new Date()
      for(let i = 10; i > 0; i--) {
        grade.push(date.getFullYear() - i + '年')
      }
      if(date.getMonth() > 6) {
        grade.push(date.getFullYear() + '年')
      }
      return [grade]
    }
  },
  watch: {
    values: {
      handler: function(val) {
        Object.keys(this.item).forEach(key => {
          this.item[key] = false
        })
      },
      deep: true
    }
    
  },
  created() {
    // getDept().then(res => {
    //   if(res.code === 200) {
    //     res.data.forEach(item => {
    //       this.depts[0].push(item)
    //     })
    //   }
    // })
    this.values.dept = this.dept
    this.values.major = this.major
    this.values.clazz = this.clazz + '班'
    this.values.grade = this.grade
  },
  methods: {
    changeDept(col) {
      this.values.deptId = col.value[0].id
      this.values.dept = col.value[0].label
      this.$set(this.majors, 0, col.value[0].children)
    },
    changeGrade(col) {
      this.values.grade = col.value[0].slice(0, 4)
    },
    changeMajor(col) {
      this.values.majorId = col.value[0].id
      this.values.major = col.value[0].label
    },
    changeClazz(col) {
      this.values.clazz = col.value[0]
    }
  },
} 
</script>

<style scoped lang="scss">
.buttons {
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 40px auto;
  padding: 10px 0;
  background-color: $primary-theme-color;
  border-radius: 8px;
  color: #ffffff;
  text-align: center;
}
</style>